<template>
	<view class="pageBg">
		<uni-indexed-list :options="carsList" :showSelect="false" @click="bindClick"></uni-indexed-list>
		<view v-if="popVisible" class="shadowBg" @click.stop="popVisible = false">
			<view class="popBox flex_c_fs_c">
				<image class="brandImg margin_b64" :src="curSelected.brand_logo" mode="aspectFit"></image>
				<text class="f_48 fw_500 tc_w textA_c">{{curSelected.brand_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresh: true,
				carsData_o: [],
				carsList: [],
				curSelected: {},
				popVisible: false,
			};
		},
		onLoad() {
			uni.getStorageSync('moon|carsList')? this.carsList = uni.getStorageSync('moon|carsList') : this.getData()
		},
		methods: {
			getData() {
				const _this = this
				const key = '357e8f7b518d241292c8bd2b0e8f358f'
				const url = 'https://apis.juhe.cn/cxdq/brand'
				_this.$api.get({
					url: url,
					loadingTip: this.refresh ? '获取数据中...' : '',
					data: {
						key: key
					},
					success: res => {
						_this.carsData_o = res.result
						_this.setData()
					},
					fail: err => {}
				})
			},
			setData() {
				let list = []
				this.carsData_o.forEach((item, index) => {
					if(list.length === 0) {
						list.push({
							letter: item.first_letter,
							// data: [item.brand_name],
							data: [item],
						})
					} else {
						let outside = true
						list.forEach((subItem, subIndex) => {
							if(subItem.letter === item.first_letter) {
								// subItem.data.push(item.brand_name)
								subItem.data.push(item)
								outside = false
							}
						})
						if(outside) {
							list.push({
								letter: item.first_letter,
								// data: [item.brand_name],
								data: [item],
							})
						}
					}
				})
				this.carsList = list
				uni.setStorageSync('moon|carsList', list)
			},
			bindClick(e) {
				this.curSelected = e.item.data
				this.popVisible = true
			},
		},
	}
</script>

<style lang="scss" scoped>
.pageBg {
	.shadowBg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background:rgba(0,0,0,0.7);
		.popBox {
			width: 440rpx;
			height: 600rpx;
			padding: 32rpx;
			box-sizing: border-box;
			background-color: #2c2c2c;
			border-radius: 24rpx;
			position: fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			.brandImg {
				width: 360rpx;
				height: 360rpx;
				border-radius: 50%;
			}
		}
	}
}
</style>
